<template>
  <div class="select-container" v-show="!isCollapsed">
    <div class="select-label">请选择对话模式</div>
    <el-select
      v-model="selectedMode"
      class="mode-select"
      placeholder="选择对话模式"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
        <div class="option-content">
          <el-icon class="option-icon">
            <component :is="item.icon" />
          </el-icon>
          <span v-show="!isCollapsed" class="option-label">{{ item.label }}</span>
        </div>
      </el-option>
    </el-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ChatLineRound, Notebook } from '@element-plus/icons-vue'

defineProps({
  isCollapsed: {
    type: Boolean,
    default: false
  }
})

const selectedMode = ref('chat')

const options = [
  {
    value: 'chat',
    label: '模型对话',
    icon: 'ChatLineRound'
  },
  {
    value: 'knowledge',
    label: '知识库问答',
    icon: 'Notebook'
  }
]
</script>

<style scoped>
.select-container {
  padding: 12px 16px;
  background-color: #ffffff;
  border-radius: 8px;
  margin: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.select-label {
  font-size: 14px;
  color: #000000;
  margin-bottom: 8px;
  text-align: left;
}

.mode-select {
  width: 100%;
}

.option-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}

.option-icon {
  font-size: 16px;
  color: var(--el-text-color-regular);
}

.option-label {
  text-align: left;
  font-size: 14px;
  color: 000;
}

:deep(.el-select .el-input__wrapper) {
  background-color: var(--el-fill-color-blank);
  border: 1px solid var(--el-border-color-light);
  transition: all 0.3s ease;
}

:deep(.el-select .el-input__wrapper:hover) {
  border-color: var(--el-color-primary);
}

:deep(.el-select .el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
}

:deep(.collapsed-select) {
  min-width: 120px !important;
}

.icon-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  cursor: pointer;
  color: #666;
}

.icon-button:hover {
  background-color: #f0f0f0;
  border-radius: 4px;
}
</style>
